<template>
  <div class="article-container">
    <van-nav-bar
      class="app-nav-bar"
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
    />

   <div class="article-wrap">
      <h1 class="title">{{ article.title }}</h1>
    <van-cell center class="user-info">
      <div class="name" slot="title">{{ article.aut_name }}</div>
      <van-image
        slot="icon"
        fit="cover"
        round
        class="avatar"
        :src="article.aut_photo"
      />
      <div slot="title" class="pubdate">
        {{ article.pubdate | relativeTime }}
      </div>
      <van-button
        round
        size="small"
        :loading="isFollowLoading"
        @click="onFollow"
        :type="article.is_followed ? 'default' : 'info'"
        :icon="article.is_followed ? '' : 'plus'"
        class="follow-btn"
      >
        {{ article.is_followed ? "已关注" : "关注" }}
      </van-button>
    </van-cell>

    <div
      class="content markdown-body"
      v-html="article.content"
      ref="article-content"
    ></div>
     <!-- 文章评论 -->
    <comment-list 
    :source="articleId"
    :list="commentList"
     />
   </div>

     <!-- 底部区域 -->
    <div class="article-bottom">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        @click="isPostShow=true"
      >写评论</van-button>
      <van-icon
        name="comment-o"
        info="123"
        color="#777"
      />
      <van-icon
        :color="article.is_collected?'orange':'#777'"
        :name="article.is_collected?'star':'star-o'"
        @click="onCollect"
      />
      <van-icon
        :color="article.attitude===1?'hotpink':'#777'"
        :name="article.attitude===1?'good-job':'good-job-o'"
        @click="onLink"
      />
      <van-icon name="share" color="#777777"></van-icon>
    </div>
    <!-- /底部区域 -->

    <van-popup 
    v-model="isPostShow" 
    position="bottom" 
    >
    <post-comment 
    :target="articleId" 
    :post-success="onPostSuccess" 
    />
    </van-popup>
  </div>
</template>
<script>
import "./markdown.css"
import { getArticleById,addCollect,deleteCollect,addLike, deleteLike} from "@/api/article"
import { ImagePreview } from "vant"
import {addFollow,deleteFollow} from '@/api/user'
import CommentList from './components/comment-list'
import PostComment from './components/post-comment.vue'
export default {
  name: "ArticleIndex",
  components:{
    CommentList,
    PostComment
  },
  props: {
    articleId: {
      type: [String, Number, Object],
      required: true,
    },
  },
  data() {
    return {
      article: {},
      isFollowLoading:false,
      isCollectLoading:false,
      isPostShow:false,
      commentList:[]
    }
  },
  created() {
    this.loadArticle();
  },
  methods: {
    async loadArticle() {
      const { data } = await getArticleById(this.articleId);
      this.article = data.data;

      // 得到所有的img标签
      // Vue中提供的this.$nextTick()
      this.$nextTick(() => {
        this.handlePreviewImage();
      });
    },
    handlePreviewImage() {
      // 获取文章内容容器
      const articleContent = this.$refs["article-content"]
      const imgs = articleContent.querySelectorAll("img")
      const imgPaths=[]
      imgs.forEach((img,index) => {
        imgPaths.push(img.src)
        img.onclick = function () {
          ImagePreview({
            images:imgPaths,//预览图片路径列表
            startPosition: index,//起始位置
          })
        }
      })
    },
    async onFollow(){
      this.isFollowLoading=true
      if(this.article.is_followed){
         // 已关注 取消关注
         await deleteFollow(this.article.aut_id)
         this.article.is_followed=false
      }else{
          // 没关注 进行关注
          await addFollow(this.article.aut_id)
          this.article.is_followed=true
      }
      this.article.is_followed=!this.article.is_followed
      this.isFollowLoading=false
    },
    async onCollect(){
      this.$toast.loading({
        message:'操作中...',
        forbidClick:true//禁止背景点击
      })
      if(this.article.is_collected){
         // 已收藏 取消收藏
         await deleteCollect(this.articleId)
      }else{
          // 没收藏 进行收藏
          await addCollect(this.articleId)
      }
      this.article.is_collected=!this.article.is_collected
      this.$toast.success(`${this.article.is_collected?'':'取消'}收藏成功`)
    },
     async onLink(){
      this.$toast.loading({
        message:'操作中...',
        forbidClick:true//禁止背景点击
      })
      if(this.article.attitude === 1){
         // 已点赞 取消点赞
         await deleteLike(this.articleId)
          this.article.attitude = -1
      }else{
          // 没点赞 进行点赞
          await addLike(this.articleId)
            this.article.attitude = 1
      }
      this.$toast.success(`${this.article.attitude === 1?'':'取消'}点赞成功`)
    },
    onPostSuccess(comment){
      this.commentList.unshift(comment)
        this.isPostShow=false
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  font-size: 20px;
  color: #3a3a3a;
  padding: 14px;
  background-color: #fff;
  margin: 0;
}
.user-info {
  .avatar {
    width: 35px;
    height: 35px;
    margin-right: 8px;
  }
  .name {
    font-size: 12px;
    color: #333333;
  }
  .pubdate {
    font-size: 11px;
    color: #b4b4b4;
  }
  .follow-btn {
    width: 85px;
    height: 29px;
  }
}
ul {
  list-style: unset;
}
.markdown-body {
  padding: 14px;
  background-color: #fff;
  list-style: unset;
}
.article-wrap{
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  bottom: 44px;
  overflow-y: auto;
}
.article-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    height: 44px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    .comment-btn {
      width: 141px;
      height: 23px;
      border: 1px solid #eeeeee;
      font-size: 15px;
      line-height: 23px;
      color: #a7a7a7;
    }
    .van-icon {
      font-size: 20px;
      .van-info {
        font-size: 11px;
        background-color: #e22829;
      }
    }
  }
</style>